<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a><cite>图片空间</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="image-box">
    <div class="image-item image-add">
        <button onclick="xadmin.open('上传图片','./image_upload',800,600)">
            <i class="layui-icon layui-icon-add-1" style="font-size:36px;opacity: 60%;line-height: 222px"></i>
        </button>
    </div>

    {foreach $imageList as $index=>$item}
    <div class="image-item" data-md5="{$item.md5}">
        <img class="image" src="{$item.img_url}" alt="图片 - {$item.md5}" data-md5="{$item.md5}"/>
        <button class="image-delete-button" onclick="deleteImage(this)" value="{$item.md5}">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
    {/foreach}
</div>

</body>

<script>
    function deleteImage(e) {
        layer.confirm('确认要删除吗？', function () {

            let imageMd5 = $(e).val()
            axios.get('/index.php/admin/imageZone/deleteImageByMd5', {
                params: {
                    md5: imageMd5
                }
            }).then(res => {
                console.log(res)
                if (res.data.code !== 200) {
                    layer.msg('删除失败', {icon: 2});
                    return;
                }
                layer.msg('删除成功', {icon: 1, time: 1500});
                $(".image-box [data-md5=" + imageMd5 + "]").remove();
            });
        });
    }

</script>

<style>
    .image-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .image-item {
        width: 200px;
        height: 222px;
        margin: 8px 8px;
        padding: 5px 5px;
        border: 1px solid rgba(50, 50, 50, 0.1);
        text-align: center;
    }

    .image {
        height: 90%;
        width: 100%;
        object-fit: contain;
    }

    .image-add button {
        width: 100%;
        border: none;
        margin: 0;
    }

    .image-add button:hover {
        background-color: rgba(50, 50, 50, 0.2);
        cursor: pointer;
    }

    .image-delete-button {
        display: block;
        border: none;
        margin: 5px auto 0 auto;
        cursor: pointer;
        color: #bd2c00;
        font-size: 12px;
    }

    .image-delete-button:hover {
        color: #2E2D3C;
    }

</style>
</html>
